<div *ngIf="userProvider.appConf.displayMode=='grid'" class="block">
  <img class="block-img" (click)="gotoDashboard()" src="assets/img/devices/{{device.config.image}}" onError="this.src='assets/img/devices/unknown.png'" />
  <div class="block-text" (click)="gotoDashboard()">
    <span>
      {{device.config.customName}}
    </span>
  </div>
  <div class="h-line"></div>
  <div class="block-footer">
    <div class="state">
      <span class="blue animated fadeIn" *ngIf="device.config.mode=='ble'">蓝牙设备</span>
      <span class="blue animated fadeIn" *ngIf="device.config.mode=='net'">WiFi设备</span>
      <span class="blue animated fadeIn" *ngIf="device.config.mode=='mqtt' && device.data.state=='online'">设备在线</span>
      <span class="gray animated fadeIn" *ngIf="device.config.mode=='mqtt' && device.data.state=='offline'">设备离线</span>
    </div>

    <div class="switch">
      <img *ngIf="device.data.switch=='on' && device.config.mode=='mqtt'" src="assets/img/icon/turn-on.png" (click)="tapSwitch()"/>
      <img *ngIf="device.data.switch=='off' && device.config.mode=='mqtt'" src="assets/img/icon/turn-off.png" (click)="tapSwitch()"/>
      <img *ngIf="device.data.switch=='waiting' && device.config.mode=='mqtt'" src="assets/svg/puff.svg" />
      <img *ngIf="device.data.switch=='' && device.config.mode=='mqtt'" src="assets/img/icon/refresh.png" (click)="tapQuery()"/>
      <img *ngIf="device.config.mode=='ble'" src="assets/img/icon/ble.png" />
      <img *ngIf="device.config.mode=='net'" src="assets/img/icon/wifi.png" />
    </div>
  </div>
</div>

<div *ngIf="userProvider.appConf.displayMode=='list'" class="block2">
  <div class="offline-box gray animated fadeIn" *ngIf="device.config.mode=='mqtt' && device.data.state=='offline'" (click)="gotoDashboard()"></div>
  <div class="img-box">
    <img class="block-img" (click)="gotoDashboard()" src="assets/img/devices/{{device.config.image}}" onError="this.src='assets/img/devices/unknown.png'" />
    <img class="mode" *ngIf="device.config.mode=='ble'" src="assets/img/icon/ble.png" />
    <img class="mode" *ngIf="device.config.mode=='net'" src="assets/img/icon/wifi.png" />
  </div>

  <div class="text-box" (click)="gotoDashboard()">
    <div class="name">
      {{device.config.customName}}
    </div>
    <div class="text" *ngIf="device.data.sum">
      {{device.data.sum}}
    </div>
  </div>

  <div class="toggle-box" *ngIf="device.config.mode=='mqtt'" [ngClass]="{'toggle-off':device.data.switch=='off'||device.data.switch=='','toggle-on':device.data.switch=='on','toggle-wait':device.data.switch=='waiting'}"
    (click)="tap()" #round>
    <div class="toggle-inner" [ngClass]="{'on':device.data.switch=='on','off':device.data.switch=='off'||device.data.switch==''}">
      <!-- <img *ngIf="device.data.switch=='waiting'" src="assets/svg/puff.svg" /> -->
    </div>
  </div>

</div>

<audio autoplay="autoplay" #speechAudio></audio>